<template>
  <div>
    <Header></Header>
    <main>
      <div class="part2">
        <img src="../../assets/img/foods/1.jpg" alt="" />
        <img src="../../assets/img/foods/2.jpg" alt="" />
        <img src="../../assets/img/foods/3.jpg" alt="" />
        <img src="../../assets/img/foods/4.jpg" alt="" />
        <img src="../../assets/img/foods/5.jpg" alt="" />
        <img src="../../assets/img/foods/6.jpg" alt="" />
        <div class="text">
          <h3>我们的咖啡特色</h3>
          <p>
            咖啡是世界三大饮料之一，是用经过烘焙的咖啡豆制作出来的饮料，与可可、茶同为流行于世界的主要饮品。
          </p>
          <p>
            咖啡树是属茜草科常乔木，日常饮用的咖啡是用咖啡豆配合各种不同的烹煮器具制作出来的，而咖啡豆就是指咖啡树果实里面的果仁，再用适当的方法烘焙而成，一杯标准的咖啡品尝起来的味道不应该是苦涩的，一名合格的咖啡师在制作咖啡时会严谨地进行每一步操作，最后为客人呈上的咖啡在味觉上会呈现出不同程度的甜度、酸度、醇厚度或是干净度。
          </p>
        </div>
      </div>
      <div class="part3">
        <figure>
          <img src="../../assets/img/foods/kabuqinuo.jpg" alt="卡布奇诺" />
          <figcaption>
            <h3>卡布奇诺</h3>
            <p>
              卡布奇诺是一种加入以同量的意大利特浓咖啡和蒸汽泡沫牛奶相混合的意大利咖啡。此时咖啡的颜色，就像卡布奇诺教会的修士在深褐色的外衣上覆上一条头巾一样，咖啡因此得名。传统的卡布奇诺咖啡是三分之一浓缩咖啡，三分之一蒸汽牛奶和三分之一泡沫牛奶，并在上面撒上小颗粒的肉桂粉末。
            </p>
          </figcaption>
        </figure>
      </div>
    </main>
    <FooterB></FooterB>
  </div>
</template>

<script>
import Header from "../Header.vue";
import FooterB from "../FooterB.vue";

export default {
  components: {
    Header,
    FooterB,
  },
};
</script>

<style lang="less" scoped>
.part2 {
  max-width: 1100px;
  margin: 50px auto;
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 30px 20px;
  img {
    object-fit: cover;
    width: 100%;
    height: 315px;
  }
  .text {
    padding: 15px;
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 4;
    grid-column-end: 5;
    color: #fff;
    background-color: #000;
    h3 {
      padding: 15px 0 5px;
      border-bottom: 1px solid #fff;
      font-family: "hanbiao";
      font-size: 24px;
    }
    p {
      text-indent: 2em;
      padding-top: 10px;
    }
  }
}

.part3 {
  max-width: 1200px;
  margin: 50px auto;
  position: relative;
  figure {
    img {
      width: 70%;
    }
    figcaption {
      padding: 50px 24px;
      position: absolute;
      width: 500px;
      bottom: 50px;
      right: 0;
      background-color: #fff;
      box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, 0.2);
      h3 {
        display: inline-block;
        margin-bottom: 15px;
        padding-bottom: 2px;
        border-bottom: 2px solid #c4c4c4;
      }
      p {
        text-indent: 2em;
      }
    }
  }
}
</style>